Figma 是一款 UI/UX 使用者介面與體驗設計軟體，專用於介面設計和原型製作，能讓多名設計師同時在同一專案上協作，這使得團隊合作變得更加簡單。Figma 支援向量圖形編輯，並提供各種設計元件庫和擴充套件，方便設計師快速建立和調整設計。
Figma 不僅適用於設計師，也對開發者友好。開發者可以直接查看設計的樣式、間距等細節，並導出設計資產和切圖標註，這極大地縮短了設計與開發之間的溝通時間。
我們可以直接註冊並下載軟體到 Windows, macOS 使用，並且 Figma 是網頁瀏覽器就能打開的軟體，因此就算不安裝也可以在任何設備上使用，包括 Linux 作業系統等。
很開心這次可以挑戰鐵人賽！接下來的 30 天我會每天發佈一則關於 Figma 的小教學，並且為了能夠有體驗更好地學習軟體操作，也會搭配一支螢幕錄影的影片，可以點進 YouTube 頻道觀看順便訂閱噢！🥸
https://youtu.be/5l9bnsbYmn4?si=ofUBVS_alXSTI011
在 UI 設計領域
Prototype（原型）是一種模擬最終產品功能和用戶體驗的模型
它能夠幫助設計師和開發團隊
在實際開發之前視覺化和測試設計概念
確保產品的功能和使用者介面符合預期
Prototype 原型的作用類似於一個預覽版
它展示了產品的佈局、互動和外觀
原型可以是簡單的手繪草圖
也可以是還原度相當高的數位產品模型
視設計階段和需求而定
根據保真度的不同
原型可以分為低保真、中保真和高保真三種類型
低保真原型通常在設計過程的早期階段使用
它們簡單而快速
通常以手繪草圖或簡單的草稿畫面呈現
這種原型有助於設計師快速探索和討論設計概念
進行快速迭代和修改
雖然低保真原型不會包含太多的細節
但它們對於初步的設計討論和概念驗證非常有用
而隨著設計進程的推進
設計師會轉向中保真原型
這些原型相比低保真原型更加詳細
通常會使用線框圖來展示佈局和功能
中保真原型提供了更具體的視覺元素和互動方式
有助於設計師和開發團隊更好地理解設計的細節
在設計的後期階段
高保真原型會被製作出來
這些原型接近最終產品的設計
包含詳細的視覺元素、互動功能和動畫效果
高保真原型可以提供逼真的用戶體驗
使得設計師能夠進行使用者互動測試
從而發現和解決潛在的設計問題
也就是說
Prototype 是使用者介面設計中非常重要的一個環節
它可以驗證我們設計的流程有沒有操作上的盲點
接下來會介紹 Prototype 的基本操作
假設我們的畫面準備好之後
可以在右方的屬性面板上找到 Prototype
點擊後會切換成 Prototype 基本設定
這時你可以決定要用什麼裝置來呈現原型
當然也可以選擇無裝置
我們選擇一個畫面來示範看看
點選其中一個 Frame
再點擊右上角的 Preview
就會彈出一個視窗
這時可以拖曳視窗去看底層的背景顏色
如果我們的畫面不適合配黑色
就可以在旁邊的面板切換底色
點擊空白處就可以切換回 Prototype 基本設定
那如果想要搭配裝置來看一下效果
可以切換想要的裝置
我們選擇 iPhone 13 mini
就可以看到預覽中的畫面被套入裝置外框
之後有打算做 App 的話都可以用這個方式來預覽
如果覺得預覽視窗太小
或是我們打算完整展示給其他人看
就可以點擊視窗右上角的 Open in presentation view
或是選擇 Frame 之後直接
點選右上角的 Present
在 Present view 中如果尺寸不是想要的
可以在右上角的 Options 中
去切換 Fit to screen
來符合目前視窗的大小
接下來我們進入畫面串接的部分
Figma 的 Prototype 串接都是以 Frame 為最小單位
沒有包在 Frame 內的物件都是無法被串接的哦
所以我們先選取一個 Frame
在被選取的狀態下右邊的屬性面板也會切換成專屬的設定面板
首先 Flow starting point 可以決定這個 Prototype 的起始點
也可以為這個 Prototype 命名
如果我們一個檔案中有多個 Prototype 時
適當的命名就很重要
再來往下會看到 Interactions
這個功能決定了**「被選取的物件」**
要**「用什麼操作與方式」連接到「指定的畫面」**
首先我們點擊 + 後
就會看到彈出一個小視窗
左上角有 On click / On tap
（選擇行動裝置類型時會是 tap，其餘是 click）
點擊旁邊箭頭會展開更多操作的選項，分別是：
這些操作中我們會先從最基本的「點擊」開始介紹
選取 On click / On tap 後
我們看到下方有個 None
展開後會看到各種選項
這個下拉選單可以決定要用什麼方式去串接
我們先選擇 Navigate to
也就是最基本的導航
其他的項目之後會再詳細介紹
選擇 Navigate to 後
下方會展開 Frame 的下拉選單跟狀態管理
這時可以展開下拉選單去選擇我們要串接的畫面
選擇後就會發現畫面上已經被線條連接起來了
這樣 Prototype 就串接好了
狀態管理的選項一樣後續會再介紹
我們可以在 Preview 視窗點擊看看
畫面很明顯的透過點擊切換到另一個畫面
如果我們要重頭執行 Prototype
可以點擊視窗左上角的 Restart prototype
或點擊快捷鍵 R
這個 Restart 的畫面
就是我們一開始指定的 Flow starting point
剛剛都是從屬性面板去調整
是不是覺得有點不太直覺
當然畫面中也可以直接拖曳來串接
我們先將 Interactions 的 Click / Tap 刪除
然後在選取的 Frame 上
可以將滑鼠往四周靠近時
會看到可以連接的圓點
滑鼠移過去後會呈現 +
按住後拖曳可以拉出一條線去連接另外一個 Frame
這樣就指定好要串接的畫面了
串接後一樣會跳出熟悉的小視窗
你可以再設定要用什麼操作來串接畫面
視窗中有個 Instant
這是立即切換的意思
展開選單有其他的切換效果
我們選擇 Dissolve
再去 Preview 嘗試一次點擊
應該可以發現切換畫面會有 fade in 的感覺
這就是基本的淡入效果
其他效果大家可以自己玩玩看
到這邊畫面串接的部分相信大家已經有一定的概念了
當然串接的時候不會只是針對 Frame 來操作
通常是畫面中的按鈕之類的元件
我們在第 2 個 Frame 中新增一個返回的按鈕
再用剛剛教的方式串接回第一個 Frame
一樣開啟 Preview 試試看
學會 Prototype 後
你就可以把你做好的介面
串接起來去感受操作流程囉
最後複習一下
Prototype 原型在 UI 設計中扮演著重要角色
能幫助設計師和開發團隊
在實際開發之前充分理解和驗證設計概念
確保最終產品的成功
原型不僅能夠視覺化設計概念
還能透過使用者測試收集回饋
改進用戶體驗
並且節省開發過程中的成本和時間
感謝你的觀看
我們明天見～
社群傳送門 - https://portaly.cc/designer.riven
在 IT 和網路產業近十年的數位產品設計師，專注於 UI/UX 使用者介面與體驗設計領域，在全臺多間大專院校與社群機構擔任顧問及講師，並於國內外各大線上課程平台開立設計課程，目前已累積超過近萬名學員參與上課。
為 Adobe 官方合作的設計師兼 Insider，曾環島舉辦設計工作坊，並獲邀代表台灣飛往美國洛杉磯參加 Adobe MAX 設計師年會，並以設計師 KOL 角色與 Intel、微軟、華碩、微星等知名品牌合作推廣科技產品。
常在 Medium 寫作設計上的知識與觀察，並得到官方認證 #Design 領域 Top Writer，同時也會在 YouTube 上製作影片教學設計的方法，近期開始實驗使用 VTuber 技術在 IG 用 Reels 短影片分享設計技巧。
▌擅長利用淺顯易懂的內容，將艱難的設計與開發技術，用任何人都能夠聽得懂的語彙，說給每一個人聽。
iThome鐵人賽
看影片追技術